/**
* 收件订单输入
*/
<template>
  <div style="float:left; width:100%;min-width:1300px;">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>收件订单输入</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 表单填写 -->
    <div style="margin-left:300px">
      <h5 class="titleStyle">技能要求:</h5>
      <el-form :model="typicalForm" :rules="rules" label-width="100px" ref="typicalForm">
        <!--         <el-form-item label="订单类型">
                  <el-select v-model="typicalForm.orderType" placeholder="请选择订单类型" style="width:150px;">
                    <el-option
                      v-for="item in typicalForm.orderOptions"
                      :key="item.orderType"
                      :label="item.label"
                      :value="item.orderType"
                    ></el-option>
                  </el-select>
                </el-form-item> -->
        <el-form-item label="技能要求" prop="skillsRequ">
          <el-select
            :multiple="multipleType"
            :multiple-limit="multipleLimitNum"
            placeholder="请选择需要的技能要求"
            style="width:470px;"
            v-model="typicalForm.skillsRequ"
          >
            <el-option
              :key="item.skillsRequ"
              :label="item.label"
              :value="item.skillsRequ"
              v-for="item in typicalForm.skillOptions"
            ></el-option>
          </el-select>
        </el-form-item>

        <h5 class="titleStyle">寄件人信息:</h5>
        <el-form :inline="true" :model="typicalForm2" :rules="rules" ref="typicalForm2">
          <el-form-item label="姓名:" label-width="100px" prop="senderName">
            <el-input
              @blur="BlurSenderName($event)"
              maxlength="15"
              placeholder="请输入姓名"
              show-word-limit
              style="width:150px;"
              type="text"
              v-model.trim="typicalForm2.senderName"
            ></el-input>
          </el-form-item>
          <el-form-item label="电话:" prop="senderMobile">
            <el-input
              @blur="blurOrderPhone($event)"
              maxlength="11"
              placeholder="请输入电话"
              show-word-limit
              style="width:250px;"
              type="text"
              v-model.trim="typicalForm2.senderMobile"
            ></el-input>
          </el-form-item>
          <el-form-item label="省市区:" prop="senderArea">
            <el-cascader
              :options="cityOptions"
              :separator="' '"
              @change="cityHandleChange"
              style="width:300px;"
              v-model="typicalForm2.senderArea"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <el-form-item label="详细地址:" prop="senderAddr">
          <el-input
            @blur="BlurSenderAddress($event)"
            maxlength="50"
            placeholder="请输入详细地址"
            show-word-limit
            style="width:470px;"
            type="textarea"
            v-model.trim="typicalForm.senderAddr"
          ></el-input>
        </el-form-item>

        <h5 class="titleStyle">收件人信息:</h5>
        <el-form :inline="true" :model="typicalForm3" :rules="rules" ref="typicalForm3">
          <el-form-item label="姓名:" label-width="100px" prop="receiverName">
            <el-input
              @blur="BlurReceiverName($event)"
              maxlength="15"
              placeholder="请输入姓名"
              show-word-limit
              style="width:150px;"
              type="text"
              v-model.trim="typicalForm3.receiverName"
            ></el-input>
          </el-form-item>
          <el-form-item label="电话:" prop="receiverPhoneNumber">
            <el-input
              @blur="blurReceiverPhone($event)"
              maxlength="11"
              placeholder="请输入电话"
              show-word-limit
              style="width:250px;"
              type="text"
              v-model.trim="typicalForm3.receiverPhoneNumber"
            ></el-input>
          </el-form-item>
          <el-form-item label="省市区:" prop="receiverPCR">
            <el-cascader
              :options="cityOptions"
              :separator="' '"
              @change="cityHandleChange"
              style="width:300px;"
              v-model="typicalForm3.receiverPCR"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <el-form-item label="详细地址:" prop="receiveAddress">
          <el-input
            @blur="BlurreceiveAddress($event)"
            maxlength="50"
            placeholder="请输入详细地址"
            show-word-limit
            style="width:470px;"
            type="textarea"
            v-model.trim="typicalForm.receiveAddress"
          ></el-input>
        </el-form-item>

        <h5 class="titleStyle">物品信息:</h5>
        <el-form :inline="true" :model="typicalForm4" :rules="rules" ref="typicalForm4">
          <el-form-item label="包裹类型:" label-width="100px" prop="category">
            <el-select placeholder="请选择包裹类型" style="width:150px;" v-model="typicalForm4.category">
              <el-option
                :key="item.category"
                :label="item.label"
                :value="item.category"
                v-for="item in typicalForm4.parcelOptions"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="重量:" label-width="55px" prop="weight">
            <el-input
              @blur="BlurWeight($event)"
              maxlength="4"
              placeholder
              style="width:150px;"
              type="text"
              v-model.trim="typicalForm4.weight"
            >
              <template slot="append">kg</template>
            </el-input>
          </el-form-item>
          <el-form-item label="声明价值:" label-width="80px" prop="value">
            <el-input
              @blur="BlurValue($event)"
              maxlength="6"
              placeholder
              style="width:150px;"
              type="text"
              v-model.trim="typicalForm4.value"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-form-item label="上门时间:" label-width="100px" prop="orderTime">
          <el-date-picker
            :picker-options="pickerOptions"
            placeholder="选择日期时间"
            type="datetime"
            v-model="typicalForm.orderTime"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>

        <div>
          <el-button
            @click="onSubmit"
            style="margin-left:400px; margin-top:40px; float:left;"
            type="primary"
          >查看匹配结果
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
    import {userList,tipsList} from "../../api/userMG";
    import options from "../../utils/country-level3-data";

    export default {
        data() {
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 8.64e7 * 2;
                    }
                },
                multipleLimitNum: 5, //技能栏多选框最多选择个数：5
                multipleType: true, //技能选择框可以多选
                timeLeagal: false, //上门时间是否合法
                receiverNameLeagal: false, //收件人姓名是否合法
                senderNameLeagal: false, //寄件人姓名是否合法
                receiveAddressLeagal: false, //收件人详细地址是否合法
                senderNameLeagal: false, //寄件人详细地址是否合法
                weightLeagal: false, //寄件重量是否合法
                cityOptions: options, //省市区三级数据
                senderPhoneLeagal: false,
                receiverPhoneLeagal: false,

                typicalForm: {
                    orderType: "收件业务", //订单类型
                    skillsRequ: "", //技能要求
                    senderAddr: "", //寄人详细地址
                    receiveAddress: "", //收件人详细地址
                    orderTime: "", //日期
                    parcelOptions: [
                        {
                            category: "1111",
                            label: "服装鞋帽"
                        },
                        {
                            category: "1104",
                            label: "个护化妆"
                        },
                        {
                            category: "1108",
                            label: "工业生产"
                        },
                        {
                            category: "1114",
                            label: "家居用品"
                        },
                        {
                            category: "1105",
                            label: "家用电器"
                        },
                        {
                            category: "1109",
                            label: "母婴用品"
                        },
                        {
                            category: "1102",
                            label: "3c电子"
                        },
                        {
                            category: "1112",
                            label: "食品"
                        },
                        {
                            category: "1115",
                            label: "玩具"
                        },
                        {
                            category: "1101",
                            label: "文件票据"
                        },
                        {
                            category: "1110",
                            label: "文体娱乐"
                        },
                        {
                            category: "1113",
                            label: "箱包"
                        },
                        {
                            category: "1103",
                            label: "香水彩妆"
                        },
                        {
                            category: "1107",
                            label: "医药保健"
                        },
                        {
                            category: "1106",
                            label: "钟表珠宝"
                        }
                    ],
                    orderOptions: [
                        {
                            orderType: "1901",
                            label: "收件业务"
                        }
                    ],
                    skillOptions: [
                        {
                            skillsRequ: "1419",
                            label: "奥萃DHC商品盘点"
                        },
                        {
                            skillsRequ: "1407",
                            label: "按摩椅安装"
                        },
                        {
                            skillsRequ: "1402",
                            label: "按摩椅安装兜底"
                        },
                        {
                            skillsRequ: "1405",
                            label: "百度千斛"
                        },
                        {
                            skillsRequ: "1410",
                            label: "百度千斛1"
                        },
                        {
                            skillsRequ: "1406",
                            label: "车险查勘取证"
                        },
                        {
                            skillsRequ: "1413",
                            label: "丰创试点"
                        },
                        {
                            skillsRequ: "1420",
                            label: "惠达陶瓷门店巡查"
                        },
                        {
                            skillsRequ: "1422",
                            label: "恒源祥门店采集"
                        },
                        {
                            skillsRequ: "1409",
                            label: "劲霸采集"
                        },
                        {
                            skillsRequ: "1411",
                            label: "柯润补货"
                        },
                        {
                            skillsRequ: "1403",
                            label: "乐凯撒业务"
                        },
                        {
                            skillsRequ: "1415",
                            label: "绿源门店巡查"
                        },
                        {
                            skillsRequ: "1418",
                            label: "酒品稽查运输"
                        },
                        {
                            skillsRequ: "1414",
                            label: "师父认证"
                        },
                        {
                            skillsRequ: "1416",
                            label: "SY商超信息采集"
                        },
                        {
                            skillsRequ: "1421",
                            label: "十月天使门店巡查"
                        },
                        {
                            skillsRequ: "1401",
                            label: "vivo信息采集"
                        },
                        {
                            skillsRequ: "1412",
                            label: "网点稽查"
                        },
                        {
                            skillsRequ: "1408",
                            label: "信息采集通用"
                        },
                        {
                            skillsRequ: "1417",
                            label: "银联标识商店巡查（大连）"
                        },
                        {
                            skillsRequ: "1423",
                            label: "易点租客户合同打印采集"
                        },
                        {
                            skillsRequ: "1005",
                            label: "金牌销售"
                        },
                        {
                            skillsRequ: "1004",
                            label: "银牌销售"
                        },
                        {
                            skillsRequ: "1003",
                            label: "铜牌销售"
                        }
                    ]
                },
                typicalForm2: {
                    senderName: "", //寄件人姓名
                    senderMobile: "", //寄件人电话
                    senderArea: ["中国", "广东省", "深圳市", "南山区"] //寄件人省市区
                },
                typicalForm3: {
                    receiverName: "", //收件人姓名
                    receiverPhoneNumber: "", //收件人电话
                    receiverPCR: ["中国", "广东省", "深圳市", "南山区"] //收件人省市区
                },
                typicalForm4: {
                    category: "", //包裹类型
                    weight: "", //重量
                    value: "", //保价
                    parcelOptions: [
                        {
                            category: "1111",
                            label: "服装鞋帽"
                        },
                        {
                            category: "1104",
                            label: "个护化妆"
                        },
                        {
                            category: "1108",
                            label: "工业生产"
                        },
                        {
                            category: "1114",
                            label: "家居用品"
                        },
                        {
                            category: "1105",
                            label: "家用电器"
                        },
                        {
                            category: "1109",
                            label: "母婴用品"
                        },
                        {
                            category: "1102",
                            label: "3c电子"
                        },
                        {
                            category: "1112",
                            label: "食品"
                        },
                        {
                            category: "1115",
                            label: "玩具"
                        },
                        {
                            category: "1101",
                            label: "文件票据"
                        },
                        {
                            category: "1110",
                            label: "文体娱乐"
                        },
                        {
                            category: "1113",
                            label: "箱包"
                        },
                        {
                            category: "1103",
                            label: "香水彩妆"
                        },
                        {
                            category: "1107",
                            label: "医药保健"
                        },
                        {
                            category: "1106",
                            label: "钟表珠宝"
                        }
                    ]
                },
                rules: {
                    senderAddr: [
                        {
                            required: true,
                            message: "寄件人详细地址不能为空!",
                            trigger: "blur"
                        }
                    ],
                    receiveAddress: [
                        {
                            required: true,
                            message: "收件人详细地址不能为空!",
                            trigger: "blur"
                        }
                    ],
                    senderName: [
                        {required: true, message: "寄件人姓名必填!", trigger: "blur"}
                    ],
                    senderMobile: [
                        {required: true, message: "寄件人电话必填!", trigger: "blur"}
                    ],
                    senderArea: [
                        {required: true, message: "寄件人省市区必填!", trigger: "blur"}
                    ],
                    receiverName: [
                        {required: true, message: "收件人姓名必填!", trigger: "blur"}
                    ],
                    receiverPhoneNumber: [
                        {required: true, message: "收件人电话必填!", trigger: "blur"}
                    ],
                    receiverPCR: [
                        {required: true, message: "收件人省市区必填!", trigger: "blur"}
                    ],
                    category: [
                        {required: true, message: "包裹类型必填!", trigger: "change"}
                    ],
                    weight: [{required: true, message: "包裹重量必填!", trigger: "blur"}],
                    orderTime: [
                        {required: true, message: "上门时间必填!", trigger: "blur"}
                    ]
                }
            };
        },

        methods: {
            cityHandleChange(value) {
                console.log(value);
            },

            //检查电话输入是否是纯自然数
            blurOrderPhone(e) {
                let boolean = new RegExp("^[0-9][0-9]*$").test(e.target.value);
                if (!boolean) {
                    this.$message.warning("请输入合法的数字!");
                    this.senderPhoneLeagal = false;
                    e.target.value = "";
                } else {
                    this.senderPhoneLeagal = true;
                }
            },
            //检测收件人电话是否合法
            blurReceiverPhone(e) {
                let boolean = new RegExp("^[0-9][0-9]*$").test(e.target.value);
                if (!boolean) {
                    this.$message.warning("请输入合法的数字!");
                    this.receiverPhoneLeagal = false;
                    e.target.value = "";
                } else {
                    this.receiverPhoneLeagal = true;
                }
            },
            //检测保价价值是否合法
            BlurValue(e) {
                let boolean = new RegExp("^[0-9][0-9]*$").test(e.target.value);
                if (!boolean) {
                    this.$message.warning("请输入合法的整数!");
                    e.target.value = "";
                } else if (e.target.value > 500000) {
                    e.target.value = 500000;
                    this.$message.warning("保价最多50万元!");
                } else if (e.target.value < 1) {
                    e.target.value = 1;
                    this.$message.warning("保价最少1元!");
                }
            },
            //检测重量数值是否合法
            BlurWeight(e) {
                let boolean = new RegExp("^[0-9][0-9]*$").test(e.target.value);
                if (!boolean) {
                    this.$message.warning("请输入合法的数字!");
                    this.weightLeagal = false;
                    e.target.value = "";
                } else if (e.target.value > 9999) {
                    e.target.value = 9999;
                    this.weightLeagal = true;
                    this.$message.warning("最重9999kg，最轻1kg!");
                } else if (e.target.value < 1) {
                    e.target.value = 1;
                    this.weightLeagal = true;
                    this.$message.warning("重量最低1kg!");
                } else {
                    this.weightLeagal = true;
                }
            },

            //检查寄件人的姓名是否有问题
            BlurSenderName(e) {
                let boolean = new RegExp("^[\u4E00-\u9FA5A-Za-z][\u4E00-\u9FA5A-Za-z]*$").test(e.target.value);
                if (!boolean) {
                    this.$message.warning("请输入合法的寄件人姓名!");
                    this.senderNameLeagal = false;
                    e.target.value = "";
                } else {
                    this.senderNameLeagal = true;
                }
            },
            //检查收件人的姓名是否有问题
            BlurReceiverName(e) {
                let boolean = new RegExp("^[\u4E00-\u9FA5A-Za-z][\u4E00-\u9FA5A-Za-z]*$").test(e.target.value);
                if (!boolean) {
                    this.$message.warning("请输入合法的收件人姓名!");
                    this.receiverNameLeagal = false;
                    e.target.value = "";
                } else {
                    this.receiverNameLeagal = true;
                }
            },

            //检查寄件人详细地址输入是否合规
            BlurSenderAddress(e) {
                let boolean = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$").test(e.target.value);
                if (!boolean) {
                    this.$message.warning("请输入合法的寄件地址!");
                    this.senderAddressLeagal = false;
                } else {
                    this.senderAddressLeagal = true;
                }
            },
            //检查详细收件人地址输入是否合规
            BlurreceiveAddress(e) {
                let boolean = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$").test(e.target.value);
                if (!boolean) {
                    this.$message.warning("请输入合法的收件人寄件地址!");
                    this.receiveAddressLeagal = false;
                } else {
                    this.receiveAddressLeagal = true;
                }
            },

            //时间合法性验证
            timeVerification() {
                var orderBeginTimeStr = this.typicalForm.orderTime.toString();
                orderBeginTimeStr = orderBeginTimeStr.replace("/-/g", "/");
                var orderBeginTime = new Date(orderBeginTimeStr).getTime();
                if (orderBeginTime <= new Date().getTime() - 1000 * 15 * 60) {
                    alert("上门时间不能小于当前时间!");
                    console.log("时间error1");
                    this.timeLeagal = false;
                    return;
                } else {
                    this.timeLeagal = true;
                }
            },
            //提交数据
            onSubmit() {
                //先进行验证
                this.$refs["typicalForm"].validate(valid => {
                    if (valid) {
                        this.$refs["typicalForm2"].validate(valid => {
                            if (valid) {
                                this.$refs["typicalForm3"].validate(valid => {
                                    if (valid) {
                                        this.$refs["typicalForm4"].validate(valid => {
                                            if (valid) {
                                                this.timeVerification();
                                                if (
                                                    this.timeLeagal &&
                                                    this.senderPhoneLeagal &&
                                                    this.receiverPhoneLeagal &&
                                                    this.weightLeagal &&
                                                    this.senderNameLeagal &&
                                                    this.receiverNameLeagal &&
                                                    this.senderAddressLeagal &&
                                                    this.receiveAddressLeagal
                                                ) {
                                                    var skillsRequString = "";
                                                    for (var i in this.typicalForm.skillsRequ) {
                                                        skillsRequString += this.typicalForm.skillsRequ[i] + ",";
                                                    }
                                                    console.log(skillsRequString);
                                                    console.log(this.typicalForm.senderName);
                                                    //localStorage.clear();
                                                    let reqForm = {
                                                        orderType: "1901",
                                                        skillsRequ: skillsRequString,
                                                        senderName: this.typicalForm2.senderName,
                                                        senderMobile: this.typicalForm2.senderMobile,
                                                        senderArea: this.typicalForm2.senderArea[3],
                                                        category: this.typicalForm4.category,
                                                        weight: this.typicalForm4.weight,
                                                        value: this.typicalForm4.value,
                                                        orderTime: this.typicalForm.orderTime,
                                                        pickupAppointTime: this.typicalForm.orderTime,
                                                        senderProvince: this.typicalForm2.senderArea[1],
                                                        senderCityName: this.typicalForm2.senderArea[2],
                                                        senderAddr: this.typicalForm.senderAddr,
                                                        receiveAddress: this.typicalForm3.receiverPCR[1] + this.typicalForm3.receiverPCR[2] + this.typicalForm3.receiverPCR[3] + this.typicalForm.receiveAddress,
                                                    };
                                                    let categoryInfo={
  data:{
	tipsInfoId:this.typicalForm4.category,
    createTime:"",
    tipsParentId:"",
    tipsName:""
  },
 pageQueryVo: {
	pageNum: "1",
    pageSize: "10",
    start: "",
     end: "",
     sortMethod:"",
     orderBy:""
  }
};
              tipsList(categoryInfo).then(res => {
                
                        //
                        //console.log("这里是返回"+res.data.list[0].tipsName);
                        //this.dialogTableData.push(res.data);
                        localStorage.setItem('categoryname', JSON.stringify(res.data.list[0].tipsName));              
                    });
                    //console.log(this.categoryname);
                                                    userList(reqForm).then(res => {
                                                        if (res.status != 0) {
                                                            alert("提交成功,但匹配无结果!");
                                                        } else {
                                                            alert("提交成功,正在为您匹配小哥!");
                                                            localStorage.setItem('order', JSON.stringify(reqForm));
                                                            localStorage.setItem('Receiving', JSON.stringify(res.data.resultResList));
                                                            localStorage.setItem('userOrderVo', JSON.stringify(res.data.userOrderVo));
                                                            this.$router.push({
                                                                path: "/system/MatchingResult", query: {orderType: "1"}
                                                            });
                                                        }
                                                    });
                                                    //**
                                                    //此处填写网络请求操作
                                                    //**
                                                    //2.提交数据并检查返回结果
                                                    //3.如果返回结果正常则（可能需要保留状态）

                                                    //4.跳转
                                                } else {
                                                    console.log("输入有错误");
                                                    alert("输入错误!");
                                                }
                                            } else {
                                                console.log("表格4组件输入有错误");
                                                alert("Form4 Error!");
                                            }
                                        });
                                    } else {
                                        console.log("表格3组件输入有错误");
                                        alert("Form3 Error!");
                                    }
                                });
                            } else {
                                console.log("表格2组件输入有错误");
                                alert("Form2 Error!");
                            }
                        });
                    } else {
                        console.log("表格1组件输入有错误");
                        alert("Form1 Error!");
                        return false;
                    }
                });
            }
        }
    };
</script>

<style scoped>
  .titleStyle {
    margin-left: 10px;
  }
</style>
